<template>
    <div class="app-container">
        <div class="todo-app">
            <!-- 头部区域 -->
            <div class="header">
                <div class="title-section">
                    <div class="title-wrapper">
                        <div class="title-icon">✨</div>
                        <div class="title-text">
                            <h1 class="app-title">智能待办</h1>
                            <p class="app-subtitle">高效管理，成就每一天</p>
                        </div>
                    </div>
                </div>

                <div class="input-section">
                    <div class="input-card">
                        <div class="input-row">
                            <input type="text" placeholder="添加新的待办事项..." v-model="todo" @input="validateInput"
                                :class="{ 'error': isErr || isEmpty }" maxlength="50" />
                            <button @click="addTodo" class="add-btn">
                                <span class="btn-icon">+</span>
                                添加
                            </button>
                        </div>

                        <div class="deadline-row">
                            <span class="time-label">截止时间</span>
                            <div class="deadline-input" @click="showDeadlinePicker = true">
                                <span v-if="deadline">{{ formatDeadlineDisplay(deadline) }}</span>
                                <span v-else class="placeholder">选择截止时间</span>
                                <span class="calendar-icon">📅</span>
                            </div>
                        </div>

                        <!-- 错误提示 -->
                        <div v-if="isErr" class="error-message">
                            待办事项不能超过50个字符
                        </div>
                        <div v-if="isEmpty" class="error-message">
                            待办事项不能为空
                        </div>
                    </div>
                </div>
            </div>

            <!-- 筛选区域 -->
            <div class="filter-section">
                <div class="filter-container">
                    <!-- 状态筛选标签 -->
                    <div class="filter-group">
                        <div class="filter-label">任务状态</div>
                        <div class="filter-tabs">
                            <button v-for="tab in ['all', 'pending', 'completed']" :key="tab" @click="filter = tab"
                                :class="{ 'active': filter === tab }" class="filter-tab">
                                <span class="tab-icon">
                                    {{ tab === 'all' ? '📋' : tab === 'pending' ? '⏳' : '✅' }}
                                </span>
                                <span class="tab-text">
                                    {{ tab === 'all' ? '全部' : tab === 'pending' ? '待完成' : '已完成' }}
                                </span>
                            </button>
                        </div>
                    </div>

                    <!-- 时间筛选 -->
                    <div class="filter-group">
                        <div class="filter-label">时间范围</div>
                        <div class="time-filter">
                            <div class="quick-filters">
                                <button v-for="type in ['today', 'week', 'month']" :key="type"
                                    @click="applyQuickFilter(type)" :class="{ 'active': quickFilter === type }"
                                    class="quick-filter-btn">
                                    <span class="btn-icon">
                                        {{ type === 'today' ? '📅' : type === 'week' ? '📆' : '🗓️' }}
                                    </span>
                                    {{ type === 'today' ? '今天' : type === 'week' ? '本周' : '本月' }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 自定义日期范围 -->
                    <div class="filter-group">
                        <div class="filter-label">自定义日期</div>
                        <div class="custom-date-filter">
                            <div class="date-range-container">
                                <div class="date-input-wrapper">
                                    <label class="date-label">开始日期</label>
                                    <input type="date" v-model="startTime" class="date-input" />
                                </div>
                                <div class="date-separator">
                                    <div class="separator-line"></div>
                                    <span class="separator-text">至</span>
                                    <div class="separator-line"></div>
                                </div>
                                <div class="date-input-wrapper">
                                    <label class="date-label">结束日期</label>
                                    <input type="date" v-model="endTime" class="date-input" />
                                </div>
                            </div>
                            <button @click="applyCustomFilter" class="apply-filter-btn">
                                <span class="btn-icon">🔍</span>
                                应用筛选
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 待办事项列表 -->
            <div class="todo-list">
                <div v-if="filteredTodos.length === 0" class="empty-state">
                    <div class="empty-icon">📝</div>
                    <p>暂无待办事项</p>
                </div>

                <draggable :list="filteredTodos" @end="onDragEnd" item-key="id" class="draggable-list"
                    ghost-class="ghost-item" chosen-class="chosen-item" :animation="200" :forceFallback="true"
                    :fallbackClass="'fallback-item'" :delay="200" :delayOnTouchOnly="true">
                    <template #item="{ element: item }">
                        <div class="todo-item" :class="{ 'completed': item.completed }">
                            <div class="todo-content">
                                <div class="todo-checkbox">
                                    <input type="checkbox" :checked="item.completed" @change="toggleTodo(item.id)"
                                        @touchstart="handleTouchStart" @touchend="handleTouchEnd" />
                                </div>
                                <div class="todo-text">
                                    <span class="todo-title">{{ item.text }}</span>
                                    <div class="todo-meta">
                                        <span class="created-time">创建于: {{ formatDateTime(item.createdAt) }}</span>
                                        <span v-if="item.deadline" class="deadline-time">
                                            截止: {{ formatDeadlineDisplay(item.deadline) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="todo-actions">
                                <button @click="deleteTodo(item.id)" @touchstart="handleTouchStart"
                                    @touchend="handleTouchEnd" class="delete-btn">
                                    🗑️
                                </button>
                            </div>
                        </div>
                    </template>
                </draggable>
            </div>

            <!-- 统计信息 -->
            <div class="stats-section">
                <div class="stat-item">
                    <span class="stat-label">总计</span>
                    <span class="stat-value">{{ arr.length }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">待完成</span>
                    <span class="stat-value">{{ pendingCount }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">已完成</span>
                    <span class="stat-value">{{ completedCount }}</span>
                </div>
            </div>
        </div>

        <!-- 截止时间选择器 -->
        <div v-if="showDeadlinePicker" class="deadline-picker-overlay" @click="showDeadlinePicker = false">
            <div class="deadline-picker" @click.stop>
                <div class="picker-header">
                    <h3>选择截止时间</h3>
                    <button @click="showDeadlinePicker = false" class="close-btn">×</button>
                </div>

                <div class="picker-content">
                    <div class="calendar">
                        <div class="calendar-header">
                            <button @click="previousMonth" class="nav-btn">‹</button>
                            <span class="current-month">{{ currentMonthYear }}</span>
                            <button @click="nextMonth" class="nav-btn">›</button>
                        </div>

                        <div class="weekdays">
                            <span v-for="day in weekdays" :key="day" class="weekday">{{ day }}</span>
                        </div>

                        <div class="calendar-grid">
                            <div v-for="day in calendarDays" :key="day.date" @click="selectDate(day)" :class="[
                                'calendar-day',
                                { 'other-month': day.isOtherMonth },
                                { 'today': day.isToday },
                                { 'selected': day.isSelected },
                                { 'disabled': day.disabled }
                            ]">
                                {{ new Date(day.date).getDate() }}
                            </div>
                        </div>
                    </div>

                    <div class="time-picker">
                        <div class="time-section">
                            <label>小时</label>
                            <div class="time-inputs">
                                <button @click="decrementHour" class="time-btn">-</button>
                                <span class="time-value">{{ String(selectedHour).padStart(2, '0') }}</span>
                                <button @click="incrementHour" class="time-btn">+</button>
                            </div>
                        </div>

                        <div class="time-section">
                            <label>分钟</label>
                            <div class="time-inputs">
                                <button @click="decrementMinute" class="time-btn">-</button>
                                <span class="time-value">{{ String(selectedMinute).padStart(2, '0') }}</span>
                                <button @click="incrementMinute" class="time-btn">+</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="picker-footer">
                    <button @click="confirmDeadline" class="confirm-btn">确认</button>
                    <button @click="showDeadlinePicker = false" class="cancel-btn">取消</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue';
import { readData, writeData } from './utils/tools';
import draggable from 'vuedraggable';

// 最大字符长度
let maxLength = 50;

// 新增的待办事项
let todo = ref('')
// 截止时间
let deadline = ref('')
// 不同状态字符串标识
let filter = ref('all');
// 是否超过字符长度
let isErr = ref(false)
// 是否为空
let isEmpty = ref(false)

// 时间筛选
let startTime = ref('')
let endTime = ref('')
let quickFilter = ref('')

// 截止时间选择器
let showDeadlinePicker = ref(false)
let currentDate = ref(new Date())
let selectedDate = ref(null)
let selectedHour = ref(new Date().getHours())
let selectedMinute = ref(0)

// 快速筛选器
const weekdays = ['日', '一', '二', '三', '四', '五', '六']

// 初始待办事项
let arr = ref([])

// 计算属性，用于列表筛选
const filteredTodos = computed(() => {
    let filtered = arr.value;

    // 状态筛选
    if (filter.value === 'pending') {
        filtered = filtered.filter(item => !item.completed);
    } else if (filter.value === 'completed') {
        filtered = filtered.filter(item => item.completed);
    }

    // 时间筛选
    if (quickFilter.value || startTime.value || endTime.value) {
        filtered = filtered.filter(item => {
            const itemDate = new Date(item.createdAt);

            if (quickFilter.value === 'today') {
                const today = new Date();
                return itemDate.toDateString() === today.toDateString();
            } else if (quickFilter.value === 'week') {
                const now = new Date();
                const startOfWeek = new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay());
                const endOfWeek = new Date(startOfWeek);
                endOfWeek.setDate(startOfWeek.getDate() + 6);
                return itemDate >= startOfWeek && itemDate <= endOfWeek;
            } else if (quickFilter.value === 'month') {
                const now = new Date();
                return itemDate.getMonth() === now.getMonth() && itemDate.getFullYear() === now.getFullYear();
            }

            if (startTime.value) {
                const start = new Date(startTime.value);
                if (itemDate < start) return false;
            }

            if (endTime.value) {
                const end = new Date(endTime.value);
                end.setHours(23, 59, 59);
                if (itemDate > end) return false;
            }

            return true;
        });
    }

    return filtered;
});

// 统计信息
const pendingCount = computed(() => arr.value.filter(item => !item.completed).length);
const completedCount = computed(() => arr.value.filter(item => item.completed).length);

// 日历相关计算属性
const currentMonthYear = computed(() => {
    const year = currentDate.value.getFullYear();
    const month = currentDate.value.getMonth() + 1;
    return `${year}年${month}月`;
});

const calendarDays = computed(() => {
    const year = currentDate.value.getFullYear();
    const month = currentDate.value.getMonth();
    const firstDay = new Date(year, month, 1);
    const startDate = new Date(firstDay);
    startDate.setDate(startDate.getDate() - firstDay.getDay());

    const days = [];
    const today = new Date();

    for (let i = 0; i < 42; i++) {
        const date = new Date(startDate);
        date.setDate(startDate.getDate() + i);

        const isOtherMonth = date.getMonth() !== month;
        const isToday = date.toDateString() === today.toDateString();
        const isSelected = selectedDate.value && date.toDateString() === selectedDate.value.toDateString();
        const disabled = date < today;

        days.push({
            date: date.toISOString(),
            isOtherMonth,
            isToday,
            isSelected,
            disabled
        });
    }

    return days;
});

// 监听数据变化，自动保存
watch(arr, (newArr) => {
    writeData(newArr);
}, { deep: true });

// 验证输入
function validateInput() {
    if (todo.value.trim().length === 0) {
        isEmpty.value = true;
        isErr.value = false;
    } else if (todo.value.trim().length > maxLength) {
        isErr.value = true;
        isEmpty.value = false;
    } else {
        isErr.value = false;
        isEmpty.value = false;
    }
}

// 添加待办事项
function addTodo() {
    if (todo.value.trim().length === 0) {
        isEmpty.value = true;
        return;
    }

    if (todo.value.trim().length > maxLength) {
        isErr.value = true;
        return;
    }

    // 如果没有选择截止日期，默认设置为第二天的这个时候
    let defaultDeadline = null;
    if (!deadline.value) {
        const tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        defaultDeadline = tomorrow.toISOString();
    }

    const newTodo = {
        id: Date.now(),
        text: todo.value.trim(),
        completed: false,
        createdAt: new Date().toISOString(),
        deadline: deadline.value || defaultDeadline
    };

    arr.value.unshift(newTodo);
    todo.value = '';
    deadline.value = '';
    isEmpty.value = false;
    isErr.value = false;
}

// 切换待办事项状态
function toggleTodo(id) {
    const todo = arr.value.find(item => item.id === id);
    if (todo) {
        todo.completed = !todo.completed;
    }
}

// 删除待办事项
function deleteTodo(id) {
    arr.value = arr.value.filter(item => item.id !== id);
}

// 触摸事件处理函数
function handleTouchStart(event) {
    // 添加触摸反馈
    event.target.style.transform = 'scale(0.95)';
    event.target.style.transition = 'transform 0.1s ease';
}

function handleTouchEnd(event) {
    // 恢复触摸反馈
    event.target.style.transform = 'scale(1)';
    event.target.style.transition = 'transform 0.1s ease';
}

// 拖拽排序结束后的处理
function onDragEnd(evt) {
    console.log('拖拽结束事件:', evt);

    // 获取拖拽后的新顺序
    const newOrder = evt.list;
    console.log('拖拽后的新顺序:', newOrder);

    // 根据拖拽后的顺序，重新排列原始数组
    // 保持筛选条件不变，只改变顺序
    const newArr = [...arr.value];

    // 找到筛选后的项目在新顺序中的位置
    const filteredIds = newOrder.map(item => item.id);

    // 重新排列原始数组，保持筛选后的顺序
    let filteredIndex = 0;
    for (let i = 0; i < newArr.length; i++) {
        if (filteredIds.includes(newArr[i].id)) {
            // 这个项目在筛选结果中，用新顺序替换
            newArr[i] = newOrder[filteredIndex];
            filteredIndex++;
        }
    }

    console.log('重新排列后的数组:', newArr);

    // 更新原始数组
    arr.value = [...newArr];

    // 保存到本地存储
    writeData(arr.value);

    console.log('拖拽排序完成，已保存到本地存储');
}

// 应用快速筛选
function applyQuickFilter(type) {
    quickFilter.value = type;
    const now = new Date();

    if (type === 'today') {
        const start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
        const end = new Date(start);
        end.setDate(start.getDate() + 1);
        startTime.value = start.toISOString().split('T')[0];
        endTime.value = end.toISOString().split('T')[0];
    } else if (type === 'week') {
        const startOfWeek = new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay());
        const endOfWeek = new Date(startOfWeek);
        endOfWeek.setDate(startOfWeek.getDate() + 6);
        startTime.value = startOfWeek.toISOString().split('T')[0];
        endTime.value = endOfWeek.toISOString().split('T')[0];
    } else if (type === 'month') {
        const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
        const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
        startTime.value = startOfMonth.toISOString().split('T')[0];
        endTime.value = endOfMonth.toISOString().split('T')[0];
    }
}

// 应用自定义筛选
function applyCustomFilter() {
    quickFilter.value = '';
}

// 日历导航
function previousMonth() {
    currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() - 1, 1);
}

function nextMonth() {
    currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1, 1);
}

// 选择日期
function selectDate(day) {
    if (day.disabled) return;
    selectedDate.value = new Date(day.date);
}

// 时间调整
function incrementHour() {
    if (selectedHour.value < 23) selectedHour.value++;
}

function decrementHour() {
    if (selectedHour.value > 0) selectedHour.value--;
}

function incrementMinute() {
    if (selectedMinute.value < 59) selectedMinute.value++;
}

function decrementMinute() {
    if (selectedMinute.value > 0) selectedMinute.value--;
}

// 确认截止时间
function confirmDeadline() {
    if (selectedDate.value) {
        const deadlineDate = new Date(selectedDate.value);
        deadlineDate.setHours(selectedHour.value, selectedMinute.value, 0, 0);
        deadline.value = deadlineDate.toISOString();
    }
    showDeadlinePicker.value = false;
}

// 格式化时间显示
function formatDateTime(dateTimeString) {
    if (!dateTimeString) return '';

    const date = new Date(dateTimeString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');

    return `${year}-${month}-${day} ${hours}:${minutes}`;
}

function formatDeadlineDisplay(dateTimeString) {
    if (!dateTimeString) return '';

    const date = new Date(dateTimeString);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');

    return `${year}年${month}月${day}日 ${hours}:${minutes}`;
}



// 组件挂载时读取数据
onMounted(() => {
    let data = readData();
    console.log('从localStorage读取的数据:', data);

    arr.value = [...data];

    // 重置筛选器，确保能看到所有数据
    quickFilter.value = '';
    startTime.value = '';
    endTime.value = '';

    console.log('当前待办事项数组:', arr.value);
    console.log('当前筛选器状态:', { quickFilter: quickFilter.value, startTime: startTime.value, endTime: endTime.value });
});
</script>

<style>
/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 移动端触摸优化 */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 允许文本选择 */
.todo-title,
.todo-meta,
.app-title,
.app-subtitle,
input,
button {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.app-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    align-items: flex-start;
}

.todo-app {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* 头部样式 */
.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    flex-shrink: 0;
}

.title-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.title-icon {
    font-size: 48px;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.title-text h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 8px;
}

.title-text p {
    font-size: 16px;
    opacity: 0.9;
}

/* 输入区域样式 */
.input-section {
    margin-top: 30px;
}

.input-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 25px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.input-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.input-row input {
    flex: 1;
    padding: 15px 20px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    background: white;
    color: #333;
    transition: all 0.3s ease;
}

.input-row input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.input-row input.error {
    border: 2px solid #ff6b6b;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
}

.add-btn {
    padding: 15px 25px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-btn:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.btn-icon {
    font-size: 18px;
    font-weight: bold;
}

.deadline-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.time-label {
    color: white;
    font-weight: 600;
    min-width: 80px;
}

.deadline-input {
    flex: 1;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.deadline-input:hover {
    background: rgba(255, 255, 255, 0.3);
}

.placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.calendar-icon {
    font-size: 18px;
}

.error-message {
    color: #ff6b6b;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

/* 筛选区域样式 - 现代设计风格 */
.filter-section {
    padding: 20px 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.filter-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-group {
    background: white;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.filter-group:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.filter-label {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-label::before {
    content: '';
    width: 4px;
    height: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
}

/* 状态筛选标签 */
.filter-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 14px;
    color: #6c757d;
    min-width: 100px;
    justify-content: center;
}

.filter-tab:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

.filter-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.tab-icon {
    font-size: 16px;
}

.tab-text {
    font-weight: 500;
}

/* 时间筛选 */
.time-filter {
    display: flex;
    justify-content: center;
}

.quick-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.quick-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    color: #495057;
    min-width: 90px;
    justify-content: center;
}

.quick-filter-btn:hover {
    border-color: #667eea;
    background: #f8f9fa;
    transform: translateY(-1px);
}

.quick-filter-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-icon {
    font-size: 16px;
}

/* 自定义日期筛选 */
.custom-date-filter {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.date-range-container {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.date-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.date-label {
    font-size: 12px;
    font-weight: 500;
    color: #6c757d;
    text-align: center;
}

.date-input {
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 14px;
    background: white;
    color: #495057;
    transition: all 0.3s ease;
    min-width: 140px;
    text-align: center;
}

.date-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.date-separator {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: column;
}

.separator-line {
    width: 20px;
    height: 2px;
    background: #dee2e6;
    border-radius: 1px;
}

.separator-text {
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    background: white;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.apply-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.apply-filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

/* 待办事项列表样式 */
.todo-list {
    padding: 20px 30px;
    flex: 1;
    overflow-y: auto;
    min-height: 300px;
    background: #f8f9fa;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.todo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.todo-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.todo-item.completed {
    background: #f8f9fa;
    border-color: #28a745;
}

.todo-item.completed .todo-title {
    text-decoration: line-through;
    color: #6c757d;
}

.todo-content {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.todo-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #667eea;
}

.todo-text {
    flex: 1;
}

.todo-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

.todo-meta {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: #6c757d;
}

.delete-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.delete-btn:hover {
    background: #ff6b6b;
    color: white;
    transform: scale(1.1);
}

/* 拖拽排序样式 */
.draggable-list {
    min-height: 100px;
}

.ghost-item {
    opacity: 0.5;
    background: #e3f2fd !important;
    border: 2px dashed #2196f3 !important;
}

.chosen-item {
    transform: rotate(5deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.fallback-item {
    transform: rotate(5deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    z-index: 1000;
}

.todo-item {
    cursor: grab;
    user-select: none;
}

.todo-item:active {
    cursor: grabbing;
}

/* 统计信息样式 */
.stats-section {
    display: flex;
    justify-content: space-around;
    padding: 25px 30px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    flex-shrink: 0;
}

.stat-item {
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 5px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #667eea;
}

/* 截止时间选择器样式 */
.deadline-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.deadline-picker {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.picker-header {
    background: #667eea;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.picker-header h3 {
    margin: 0;
    font-size: 18px;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.picker-content {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.calendar {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    overflow: hidden;
}

.calendar-header {
    background: #f8f9fa;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9ecef;
}

.nav-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.nav-btn:hover {
    background: #e9ecef;
}

.current-month {
    font-weight: 600;
    color: #333;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.weekday {
    padding: 10px;
    text-align: center;
    font-weight: 600;
    color: #6c757d;
    font-size: 12px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day {
    padding: 10px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #f8f9fa;
    transition: all 0.3s ease;
    font-size: 14px;
}

.calendar-day:hover:not(.disabled) {
    background: #667eea;
    color: white;
}

.calendar-day.other-month {
    color: #adb5bd;
}

.calendar-day.today {
    background: #28a745;
    color: white;
    font-weight: 600;
}

.calendar-day.selected {
    background: #667eea;
    color: white;
    font-weight: 600;
}

.calendar-day.disabled {
    color: #adb5bd;
    cursor: not-allowed;
}

.time-picker {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.time-section {
    text-align: center;
}

.time-section label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #333;
}

.time-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.time-btn {
    width: 35px;
    height: 35px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.time-btn:hover {
    background: #5a6fd8;
    transform: scale(1.1);
}

.time-value {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    min-width: 30px;
    text-align: center;
}

.picker-footer {
    padding: 20px;
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    border-top: 1px solid #e9ecef;
}

.confirm-btn,
.cancel-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.confirm-btn {
    background: #28a745;
    color: white;
}

.confirm-btn:hover {
    background: #218838;
}

.cancel-btn {
    background: #6c757d;
    color: white;
}

.cancel-btn:hover {
    background: #5a6268;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .app-container {
        padding: 10px;
    }

    .header {
        padding: 20px;
    }

    .title-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .title-text h1 {
        font-size: 28px;
    }

    .input-row {
        flex-direction: column;
    }

    .picker-content {
        grid-template-columns: 1fr;
    }

    .custom-date-filter {
        flex-direction: column;
        align-items: stretch;
    }

    .date-range-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .date-input-wrapper {
        width: 100%;
        text-align: center;
    }

    .date-input {
        min-width: 200px;
    }

    .filter-section {
        padding: 15px 20px;
    }

    .filter-container {
        gap: 15px;
    }

    .filter-group {
        padding: 15px;
    }

    .todo-list {
        padding: 15px 20px;
    }

    .stats-section {
        padding: 15px 20px;
    }

    .filter-tabs {
        justify-content: center;
    }

    .filter-tab {
        min-width: 80px;
        padding: 10px 16px;
    }

    .quick-filters {
        justify-content: center;
    }

    .quick-filter-btn {
        min-width: 80px;
        padding: 10px 16px;
    }

    .date-separator {
        flex-direction: row;
        gap: 16px;
    }

    .separator-line {
        width: 40px;
        height: 2px;
    }

    /* 移动端触摸优化 */
    .todo-checkbox input[type="checkbox"] {
        width: 24px;
        height: 24px;
        min-height: 44px;
        /* 确保触摸区域足够大 */
        min-width: 44px;
    }

    .delete-btn {
        min-height: 44px;
        min-width: 44px;
        font-size: 20px;
        padding: 12px;
    }

    .todo-item {
        padding: 25px 20px;
        margin-bottom: 20px;
    }

    .todo-content {
        gap: 20px;
    }

    .filter-tab {
        min-height: 44px;
        padding: 12px 20px;
    }

    .quick-filter-btn {
        min-height: 44px;
        padding: 12px 20px;
    }

    .add-btn {
        min-height: 44px;
        padding: 15px 25px;
    }

    .input-row input {
        min-height: 44px;
        padding: 15px 20px;
    }

    .deadline-input {
        min-height: 44px;
        padding: 15px 20px;
    }

    .time-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .confirm-btn,
    .cancel-btn {
        min-height: 44px;
        padding: 15px 30px;
    }

    /* 拖拽优化 */
    .draggable-list {
        touch-action: pan-y;
    }

    .todo-item {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    /* 触摸反馈优化 */
    .todo-item:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    .filter-tab:active,
    .quick-filter-btn:active,
    .add-btn:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
}
</style>